
function plotMZIntensity(spectrum_id, intensities, mz_values){
	$("#precursor_details_view").html("");
	myLayout.open('west');
        var mdata = [];
        mz_array = mz_values.split(",");
        var intensity_array = intensities.split(",");
        for (var i = 0, len = mz_array.length; i !== len; i++) {
                var arr_obj = [];
                arr_obj.push(parseInt(mz_array[i]));
                arr_obj.push(parseInt(intensity_array[i]));
                mdata.push(arr_obj);
        }
        var chart;
        $(document).ready(function() {
		//plot table
		var mzi_tbl_str = "<div class='tbl_row'><table><thead><tr><th>m/z</th><th>&nbsp;intensity sum</th></tr></thead>";
   		mzi_tbl_str = mzi_tbl_str + "<tbody>";
  		var mzi_tbl_rows = "";
		var bgcolor = "";
                for (var mzi = 0; mzi<mdata.length; mzi++){
                    if (mzi%2 == 1){
                      bgcolor = " bgcolor='#F78181'";
                    }else{
                      bgcolor = "";
                    }
                  mzi_tbl_rows = mzi_tbl_rows + "<tr" + bgcolor + "><td>" + mdata[mzi][0] + "</td><td>&nbsp;" + mdata[mzi][1] + "</td></tr>";
                }
		mzi_tbl_str = mzi_tbl_str + mzi_tbl_rows + "</tbody></table></div>";
		$("#chart_table_div").html(mzi_tbl_str);
                chart = new Highcharts.Chart({
                chart: {
                renderTo: 'chart_div',
                type: 'column',
                zoomType: 'x'
            },
            title: {
                text: 'm/z Peaks ' + spectrum_id
            },
	    credits: {
      		enabled: false
            },	
            xAxis: {
                title: {
                    enabled: true,
                    text: 'm/z'
                },
                startOnTick: true,
                endOnTick: true,
                showLastLabel: true
            },
            yAxis: {
                title: {
                    text: 'intensity sum'
                }
            },
            tooltip: {
                formatter: function() {
			return '' + this.x +' m/z, ' + this.y*1000 +' intensity sum';
                }
            },
	legend: {
                layout: 'vertical',
                align: 'left',
                verticalAlign: 'top',
                x: 320,
                y: 50,
                floating: true,
                backgroundColor: '#FFFFFF',
                borderWidth: 1
            },
        plotOptions: {
		series:{
			cursor: 'pointer',
			allowPointSelect: true,
			point:{
				events: {
					click: function(event){
						$("#spa_peak_mz").val(mz_array[this.x]);
						//console.log('y: '+ this.y + " x:" + this.x );			
					}
				}
			}
		},
                scatter: {
                    marker: {
                        radius: 5,
                        states: {
                            hover: {
                                enabled: true,
                                lineColor: 'rgb(100,100,100)'
                            }
                        }
                    },
                    states: {
                        hover: {
                            marker: {
                                enabled: false
                            }
                        }
                    }
                }
         },
            series: [{
                name: 'm/z:intensity sum',
                color: 'rgba(223, 83, 83, .5)',
                data: mdata
            }]
        });
         });
}

function plotRIIntensity(chromatogram_id, intensities, ri_values){
	$("#precursor_details_view").html("");
	myLayout.open('west');
        var mdata = [];
	var ri_array = ri_values.split(",");
	var intensity_array = intensities.split(",");
        for (var i = 0, len = ri_array.length; i !== len; i++) {
		var arr_obj = [];
		arr_obj.push(i);
		arr_obj.push(parseInt(intensity_array[i]));
		mdata.push(arr_obj);
	}
	var chart;
                $(document).ready(function() {
                chart = new Highcharts.Chart({
                chart: {
                //renderTo: 'cdf_highchart',
                renderTo: 'chart_div',
                type: 'spline',
                zoomType: 'x'
            },
            title: {
                text: 'Sum(Intensity)/RI ' + chromatogram_id
            },
            subtitle: {
                text: 'Source: Experiment .../Chromatogram ...'
            },
            xAxis: {
                title: {
                    enabled: true,
                    text: 'RI'
                },
                startOnTick: true,
                endOnTick: true,
                showLastLabel: true
            },
            yAxis: {
                title: {
                    text: 'Intensity(*1000)'
                }
            },
            tooltip: {
                formatter: function() {
                        return ''+
                        ri_array[this.x] +' ri, ' + this.y*1000 +' intensity sum';
                }
            },
	credits: {
      		enabled: false
  	},
	legend: {
                layout: 'vertical',
                align: 'left',
                verticalAlign: 'top',
                x: 320,
                y: 70,
                floating: true,
                backgroundColor: '#FFFFFF',
                borderWidth: 1
            },
            plotOptions: {
                scatter: {
                    marker: {
                        radius: 5,
                        states: {
                            hover: {
                                enabled: true,
                                lineColor: 'rgb(100,100,100)'
                            }
                        }
                    },
                    states: {
                        hover: {
                            marker: {
                                enabled: false
                            }
                        }
                    }
                }
            },
            series: [{
                name: 'RI:Sum(Intensity)',
                color: 'rgba(223, 83, 83, .5)',
                data: mdata
            }
	]
        });
         });
}

